import React, { useEffect } from 'react';
import * as echarts from 'echarts';

function Sunecharts(props) {
  useEffect(() => {
    var myCharts = echarts.init(document.querySelector('#ordermanage'))
    myCharts.setOption({
      title: {
        text: props.title
      },
      tooltip: {},
      xAxis: {
        data: props.list
      },
      yAxis: {},
      color: 3,
      textStyle: {
        //   fontSize:40
      },

      // 设置数据系列
      series: [
        {
          name: '销量',
          type: 'line',


          //   光滑曲线
          lineStyle: {
            color: 'blue',
            width: 5,

          },
          // itemStyle:{
          //    shadowColor:'blue',
          //     shadowOffsetY:45
          // },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [  // 渐变颜色
                {
                  offset: 0,
                  color: props.color1,
                },
                {
                  offset: 1,
                  color: props.color2,
                },
              ],
              global: false,
            },
          },
          //原点的类型
          // symbol:''
          smooth: true,
          data: props.arrlist
        }
      ]
    })
  })
  return (
    <div>
      <div id='ordermanage' style={props.style}>

      </div>
    </div>
  );
}

export default Sunecharts;